<template>
  <div class="map-wrap">
    <div class="container" ref="myEchart"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
// 中国地图数据
import "./china.js";
// 图表实例
let myChart = null;
// 省份数据
const provinceData = [
  { name: "北京", value: 199 },
  { name: "天津", value: 42 },
  { name: "河北", value: 102 },
  { name: "山西", value: 81 },
  { name: "内蒙古", value: 47 },
  { name: "辽宁", value: 67 },
  { name: "吉林", value: 82 },
  { name: "黑龙江", value: 123 },
  { name: "上海", value: 24 },
  { name: "江苏", value: 92 },
  { name: "浙江", value: 114 },
  { name: "安徽", value: 109 },
  { name: "福建", value: 116 },
  { name: "江西", value: 91 },
  { name: "山东", value: 119 },
  { name: "河南", value: 137 },
  { name: "湖北", value: 116 },
  { name: "湖南", value: 114 },
  { name: "重庆", value: 91 },
  { name: "四川", value: 125 },
  { name: "贵州", value: 62 },
  { name: "云南", value: 83 },
  { name: "西藏", value: 9 },
  { name: "陕西", value: 80 },
  { name: "甘肃", value: 56 },
  { name: "青海", value: 10 },
  { name: "宁夏", value: 18 },
  { name: "新疆", value: 180 },
  { name: "广东", value: 123 },
  { name: "广西", value: 59 },
  { name: "海南", value: 14 },
];

const top10 = [
  {
    name: "北京",
    value: [116.405285, 39.904989, 199],
  },
  {
    name: "新疆",
    value: [87.617733, 43.792818, 180],
  },
  {
    name: "河北",
    value: [114.502461, 38.045474, 137],
  },
  {
    name: "重庆",
    value: [106.504962, 29.533155, 125],
  },
  {
    name: "黑龙江",
    value: [126.642464, 45.756967, 123],
  },
  {
    name: "广东",
    value: [113.280637, 23.125178, 123],
  },
  {
    name: "山东",
    value: [117.000923, 36.675807, 119],
  },
  {
    name: "福建",
    value: [119.306239, 26.075302, 116],
  },
  {
    name: "湖北",
    value: [114.298572, 30.584355, 116],
  },
  {
    name: "浙江",
    value: [120.153576, 30.287459, 114],
  },
];
export default {
  name: "bai-map",
  data() {
    return {};
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      myChart = echarts.init(this.$refs.myEchart);
      this.renderMap();
    },
    renderMap() {
      // 显示Loading
      myChart.showLoading({
        text: "",
        maskColor: "rgba(0, 0, 0, 0.3)",
      });
      let option = {
        tooltip: {},
        // 左下角控制条
        visualMap: {
          show: true,
          min: 0,
          max: 200,
          left: "5%",
          top: "bottom",
          calculable: true,
          seriesIndex: [0], // 关联series第0个元素
          inRange: {
            color: ["#467bc0", "#04387b"],
          },
          textStyle: {
            color: "#fff",
          },
        },
        // 地理坐标系
        // 默认情况下，map series 会自己生成内部专用的 geo 组件。
        // 但是也可以用这个 geoIndex 指定一个 geo 组件。
        // 这样的话，map 和 其他 series（例如散点图）就可以共享一个 geo 组件了。
        // 并且，geo 组件的颜色也可以被这个 map series 控制，从而用 visualMap 来更改。
        // 当设定了 geoIndex 后，
        // series-map.map 属性，以及 series-map.itemStyle 等样式配置不再起作用，而是采用 geo 中的相应属性。
        geo: {
          show: true,
          map: "china",
          roam: true, // 允许缩放平移
          // 隐藏地图上各个省份的名称
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: false,
            },
          },
          // 省份板块颜色
          itemStyle: {
            normal: {
              areaColor: "#023677",
              borderColor: "#1180c7",
            },
            emphasis: {
              areaColor: "#4499d0",
            },
          },
        },
        series: [
          {
            name: "省份",
            type: "map",
            map: "china",
            zoom: 1,
            center: [105, 36],
            geoIndex: 0, // 关联geo配置
            aspectScale: 0.75, //长宽比
            showLegendSymbol: false, // 存在legend时显示
            data: provinceData,
          },
          {
            name: "Top 10",
            type: "effectScatter",
            coordinateSystem: "geo", // 关联geo配置
            data: top10,
            symbolSize: function (val) {
              return val[2] / 12;
            },
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
            },
            hoverAnimation: true,
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: true,
                textStyle: {
                  color: "#fff",
                },
              },
            },
            itemStyle: {
              normal: {
                color: "yellow",
                shadowBlur: 10,
                shadowColor: "yellow",
              },
            },
            zlevel: 1,
          },
        ],
      };
      myChart.setOption(option);
      myChart.hideLoading();
    },
  },
};
</script>

<style lang="scss" scoped>
.map-wrap {
  height: 100%;
  .container {
    height: 100%;
  }
}
</style>